<template>
  <el-container>
    <el-header style="height: auto; padding: 0; background: transparent">
      <el-card shadow="never">
        <el-descriptions :column="1" title="问题描述">
          <el-descriptions-item label="问题1">
            <i class="el-icon-circle-close"></i>
            每次加载时候, el-select下拉组件options值获取在获取userId之后,
            出现下拉闪烁数字id问题。
          </el-descriptions-item>
          <el-descriptions-item label="问题2">
            <i class="el-icon-circle-close"></i>
            在显示数字id时候，点击下拉框，加载到下拉popper列表后，不会回显文字。
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-header>

    <el-main style="display: flex; padding: 0; margin-top: 20px">
      <el-card shadow="never" style="flex: 1">
        <div v-if="errorForm">
          数据加载失败,请重试
          <br />
          <el-button type="text" @click="retryForm">重试</el-button>
        </div>
        <el-form v-else ref="formRef" v-loading="loadingForm" :model="form" label-width="80px" style="width: 460px" >
          <el-form-item label="活动名称" prop="region">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
            <el-select clearable :loading="loadingRegion" v-model="form.region" style="width: 100%">
              <template slot="empty">
                <div v-if="errorRegion">
                  数据加载失败, 请重试
                  <br />
                  <el-button type="text" @click="retryRegion">重试</el-button>
                </div>
              </template>
              <el-option
                v-for="(item, index) in regionList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%" ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align:center;">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="form.time" style="width: 100%" ></el-time-picker>
            </el-col>
          </el-form-item>
           <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource" v-loading="loadingResource" style="width:100%;">
              <template v-if="errorResource">
                <div style="display:flex;">
                  <div style="font-size:13px;">数据加载失败, 请重试</div>
                  <el-button type="text" @click="retryResource">重试</el-button>
                </div>
              </template>
              <template e-else>
                <el-radio v-for="(item, index) in resourceList" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </template>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">立即创建</el-button>
            <el-button >重置</el-button>
          </el-form-item>
        </el-form>
        <code> form: {{ form }} </code>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>

export default {
  name: "Question",
  data() {
    return {
      loadingRegion: false,
      errorRegion: false,
      loadingResource: false,
      errorResource: false,
      loadingForm: false,
      errorForm: false,
      regionList: [],
      resourceList: [],
      form: {
        name: "",
        region: "",
        date: "",
        time: "",
        resource: "",
        desc: "",
      },
    };
  },
  mounted() {
    this.retryForm();
    this.retryRegion(); // 1s后返回
    this.retryResource();
  },
  methods: {
    async retryForm() {
      try {
        this.loadingForm = true
        this.errorForm = false
        const res = await this.fetchForm();
        // throw new Error('数据加载失败')
        this.loadingForm = false
        Object.assign(this.form, res)
      } catch(error) {
        this.loadingForm = false
        this.errorForm = true
      }
    },
    async retryRegion() {
      try {
        this.loadingRegion = true
        this.errorRegion = false
        const res = await this.fetchRegion();
        throw new Error('数据加载失败')
        this.loadingRegion = false
        this.regionList = res || [];
      } catch(error) {
        this.loadingRegion = false
        this.errorRegion = true
      }
    },
    async retryResource() {
      try {
        this.loadingResource = true
        this.errorResource = false
        const res = await this.fetchResource();
        // throw new Error('数据加载失败')
        this.loadingResource = false
        this.resourceList= res || [];
      } catch(error) {
        this.loadingResource = false
        this.errorResource = true
      }
    },
    fetchForm() {
      const data = {
        name: "活动1",
        region: "",
        date: "2024-9-30",
        time: "08:00:00",
        resource: "",
        desc: "活动描述~",
      }
      return new Promise((resolve, reject) => setTimeout(() => resolve(data), 1000));
    },
     fetchRegion() {
      const data = [
        { label: "区域一", value: 'shanghai' },
        { label: "区域二", value: 'beijing' },
        { label: "区域三", value: 'sichuan' },
      ];
      return new Promise((resolve, reject) => setTimeout(() => resolve(data), 2000));
    },
    fetchResource() {
      const data = [
        { label: "线上品牌商赞助", value: 'online' },
        { label: "线下场地免费", value: 'offline' },
      ]
      return new Promise((resolve, reject) => setTimeout(() => resolve(data), 3000));
    },
  },
};
</script>

<style scoped>
.el-descriptions /deep/ .el-icon-circle-close {
  color: #f56c6c;
  margin-right: 6px;
}
</style>
